<style>
    *{padding: 0;
    margin: 0;
body{background-color: pink;}
   }
   div .xt{
        
        height: 30px;
        background-color: tomato;
        border:0;
    }
    button{
        margin-left: 20px;
    }
    span{
      color: white;
      margin-left: 10px;
    }
</style>
<body> 
    <div class="box">
        <div class="xt"></div>
    </div>
    <button>开始游戏</button> <span></span>
</body>
<script>
    function star(){
    function part1_star(){
          t1=setInterval(function(){
          // 创建img标签对象
          var imgObj = document.createElement("img")
          imgObj.src="./star.gif"

          // 随机大小
          var img_max=100
          var img_min=30
          var nowWidth=Math.floor(Math.random()*(img_max-img_min+1)+img_min)
          imgObj.style.width=nowWidth+"px"
          imgObj.style.position="absolute"

          // 随机位置
          var min=0
          var max_h=(window.innerHeight || document.documentElement.clientHeight)-nowWidth
          imgObj.style.top=Math.floor(Math.random()*(max_h-min+1)+min)+"px"
          var max_w=(window.innerWidth || document.documentElement.clientWidth)-nowWidth
          imgObj.style.left=Math.floor(Math.random()*(max_w-min+1)+min)+"px"

          // 追加到页面中
          document.body.appendChild(imgObj)
        },700)

        //  点击消灭星星&回血
        var count=0
        document.querySelector("span").innerText="得分："+count
        var bodyObj=document.body
        bodyObj.onclick = function(evt){
        var e = evt || window.event
        var target=e.target || e.srcElement
        if(target.nodeName==="IMG"){
          num+=20
          bodyObj.removeChild(target)
          count++
          document.querySelector("span").innerText="得分："+count
        }
      }

      // 生命值递减
        var xtObj=document.querySelector(".xt")
        var num=200

        t2=setInterval(function(){
          
          num--
          xtObj.style.width=num+"px"
          // 设置边界
          if (num>=200) num=200
          if (num<=0){
              num=0
              clearInterval(t1)
              clearInterval(t2)
              // 取消body点击事件
              var bodyObj=document.body
              bodyObj.onclick =null
              alert("游戏结束!   您的得分为："+count)
            }
        },40)
    }

    // 点击重新开始 初始化数据
    var resetbtn = document.querySelector("button")
    temp=true
    resetbtn.onclick=function(){
      if(temp){
        resetbtn.innerText="重新开始"
        part1_star()
        temp=!temp
      }else{
        resetbtn.innerText="开始游戏"
        document.querySelector("span").innerText="上次"+document.querySelector("span").innerText
        clearInterval(t1)
        clearInterval(t2)
        document.querySelectorAll("img").forEach(function(item,i){
        item.remove()
        })
        // 恢复血量&再次执行part1_star
        num=200
        document.querySelector(".xt").style.width=num+"px"
        temp=!temp
      }
    }
}
star()
</script>